<template>
	<view class="set_div">
		<view class="bg_div">
			<view class="title_div">设置每日做题量</view>			
			<list class="num_list">
				<cell  v-for="(item,index) in numList"
				                           @tap="itemSelect(index)"
										   :class="index==selIndex?'num_item num_item_active':'num_item'">
					{{item}}
				</cell>
				
			</list>
			<!-- <view class="self_div">
				<text>自定义</text> 
			   <input  type="text" placeholder="你想做几道题呢？" />
			</view> -->
			
			<view class="btn_div" @click="subNum">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:["numList"],//可选择的条数
		data(){
			return{				
				selIndex:-1,//选中的下标
				selNum:0,//选择的题目条数
			}
			
		},
		methods:{
			itemSelect:function(index){
				//点击某条
				this.selIndex=index;
				this.selNum=this.numList[index];
			},
			subNum:function(){
				//把选择的条数给父组件
				  this.$emit('selNum',this.selNum);
			}
		}
	}
</script>

<style>
	.set_div {
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	
	}
	.set_div .bg_div{
		position: absolute;
		bottom: 20rpx;
		left: 40rpx;
		right: 40rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
	}
	.set_div .bg_div .title_div{
		height: 100rpx;
		font-size: 32rpx;
		color: #333333;
		text-align: center;
		line-height: 100rpx;
		
	}
	 .set_div .bg_div .num_list{
		
	}
	.set_div .bg_div .num_list .num_item{
		display: block;
		height: 62rpx;
		background: #f8f8f8;
		border-radius: 10rpx;
		line-height: 62rpx;
		font-size: 24rpx;
		text-align: center;
	    margin-left: 40rpx;
		margin-right: 40rpx;
		margin-top: 16rpx;
	} 
	.set_div .bg_div .num_list .num_item_active{
		background: #ffedeb;
		border: 1rpx solid #e13b29;
		color:#e13b29 ;
	}
	.set_div .bg_div .self_div{
		font-size: 24rpx;
		color: #666666;
		height: 62rpx;
		line-height: 62rpx;
		margin-left: 40rpx;
		margin-right: 40rpx;
		margin-top: 16rpx;
		display: flex;
		align-items: center;
	}
	.set_div .bg_div .self_div input{
		height: 62rpx;
		background: #f8f8f8;
		border-radius: 10rpx;
		line-height: 62rpx;
		font-size: 24rpx;
		padding-left: 20rpx;
		margin-left: 20rpx;
	}
	.set_div .bg_div .btn_div{
		height: 70rpx;
		margin-top: 40rpx;
		margin-left: 40rpx;
		margin-right: 40rpx;
		background: #e13b29;
		margin-bottom: 40rpx;
		border-radius: 35rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		text-align: center;
		line-height: 70rpx;
	}
</style>
